<template>
	<view>
		<u-empty v-if="isEmpty" mode="list" style="padding-top: 30vh;" icon="/static/img/empty.png"></u-empty>

		<!-- 
		<uni-list v-for="(item,index) in list" :key="index">
			<uni-list-item :title="item.ProjectName" :note="item.ProjectCode" :thumb="'/static/img/icon.png'"
				thumbSize="lg" :rightText="''" clickable @click="toPage(item)">
			</uni-list-item>
		</uni-list> -->

		<view class="my_list" v-for="(item, index) in dataList" :key="index" @click="groupClick(item)">
			<view class="my_list_box">
				<view class="my_list_img">
					<u--image :src="'/static/img/icon.png'" width="40px" height="40px"></u--image>
				</view>

				<view class="my_list_left">
					<view class="my_list_item_title">
						<span v-if="type">{{ item[columnList[0].key] }}</span>
						<span v-else>{{ item[title] }}</span>
					</view>
					<view class="my_list_item_note">
						<span v-if="type">{{ item[columnList[1].key] }}</span>
						<span v-else>{{ item[note] }}</span>
					</view>

					<view class="my_list_item_note" v-if="showCustom">
						<view v-for="(dt,index) in customData" :key="index">
							<span>{{dt.title}} {{ item[dt.text] }}</span>
						</view>
					</view>

					<view class="my_list_item_flow">
						<span>申请时间：{{ item.ApplyTime | formatDate }}</span>
						<span v-if="item.StatusName!='已办结'">当前环节：{{ item.StepNames }}</span>
					</view>
				</view>
				<view class="my_list_right" v-if="item.StatusName">
					<u-tag :text="item.StatusName" type="warning"></u-tag>
				</view>
				<view class="my_list_border_bottom"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
			columnList: {
				type: Array,
				default: () => []
			},
			isEmpty: {
				type: Boolean,
				default: false
			},
			type: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			},
			note: {
				type: String,
				default: ''
			},
			showCustom: {
				type: Boolean,
				default: true
			},
			customData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {};
		},
		mounted() {},
		methods: {
			groupClick(e) {
				this.$emit('toPage', e);
			}
		}
	};
</script>

<style scoped lang="scss">
	.my_list {
		background-color: #ffffff;

		.my_list_box {
			display: flex;
			padding: 10px 12px;
			border-bottom: 1px solid #c8c7cc;

			.my_list_img {
				padding-right: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.my_list_left {
				flex: 1;
				padding-right: 8px;

				.my_list_item_title {
					font-size: 14px;
					color: #3b4144;
					overflow: hidden;
				}

				.my_list_item_note {
					margin-top: 3px;
					color: #999;
					font-size: 12px;
					overflow: hidden;
				}

				.my_list_item_flow {
					// margin-top: 3px;
					color: #999;
					font-size: 12px;
					display: flex;
					flex-direction: column;

					span {
						margin-top: 3px;
					}
				}
			}

			.my_list_right {
				display: flex;
				align-items: center;
				justify-content: center;

				span {
					color: #999;
					font-size: 12px;
				}
			}
		}
	}

	.my_list_border_bottom {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: 1px;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #c8c7cc;
	}
</style>
